<template>
    <view class="container">
        <view class="ul">
            <view v-for="item in article" :key="item.id" class="li">
                <view class="title">
                    <view class="dot"></view>
                    <view class="text">{{ item.title }}</view>
                </view>
                <view class="content">{{ item.content }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import { getHelpList } from "@/config/api"
export default {
    data()  {
        return {
            article: []
        }
    },
    async onLoad() {
        this.article = await getHelpList()
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
    .container {
        .ul {
            padding: 0 40rpx;
            .li {
                margin-top: 83rpx;
                &:nth-child(1) {
                    margin-top: 64rpx;
                }
                .title {
                    display: flex;
                    align-items: center;
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #000000;
                    .dot {
                        width: 18rpx;
                        height: 18rpx;
                        border-radius: 9rpx;
                        background: #356CE7;
                    }
                    .text {
                        margin-left: 14rpx;
                    }
                }
                .content {
                    margin-top: 31rpx;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #4A4A4A;
                    word-wrap:break-word;
                    word-break:normal;
                }
            }
        }
    }
</style>
